<!--
 * @title: 用户维护
 * @author: andy.ten@tom.com & xukaixing@hotmail.com
 * @Date: 2022-03-30 14:58:25
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2022-06-05 22:17:56
 * @version: 1.0.6
 * @copyright: copyright (c) 2022 andyten
 *  node: you can not copy and/or use and/or modify this program free,
 *  please reserve the segment above.Please mail me if you have any question.
-->
<template>
  <div>
    <!-- 查询条件表单 -->
    <ht-form ref="userSearchFm" ref-form="userSearchFm" divider="检索分栏" :form-list="userSearchList">
      <ht-search-bar>
        <ht-button @click="handleSearch()">检索</ht-button>
        <ht-button>重置</ht-button>
      </ht-search-bar>
    </ht-form>
    <!-- @rowDblclick="handleRowDblClick" -->
    <ht-table ref="userTableList" ref-table="userTableList" :table-head="tableHeadList" :table-data="searchUserData" :page-size="10">
      <ht-button @click="handleSave">新增</ht-button>
      <ht-button biz-type="downloadTemplate" @click="downloadImportTemplate">导入模版下载</ht-button>
      <template slot="import">
        <ht-import-dialog :import="importUser" :params="importParams" :cb="handleCb" />
      </template>
      <template slot="export">
        <ht-export-dialog :export="exportUser" :find-export-fields="findExportFields" :save-export-fields="saveExportFields" />
      </template>
    </ht-table>
    <user-edit v-if="dialogVisible" :visible.sync="dialogVisible" :row-data="rowData" />

    <user-import v-if="importDialogVisible" :visible.sync="importDialogVisible" />

  </div>

</template>
<script>
import UserEdit from './module/userEdit';
import UserImport from './module/userImport';
import { findUsers, findUserLoginInfo, importUser, exportUser, findExportFields, saveExportFields } from '@/api/ht.admin';
import { downloadTemplate } from '@/utils';
export default {
  name: 'UserIndex',
  components: { UserEdit, UserImport },
  data() {
    return {
      dialogVisible: false,
      importDialogVisible: false,
      count: 0,
      rowData: {},
      importUser: importUser(),
      importParams: { bizType: 'admin@saveSysUserTmp', maxColumn: 2, maxBlankRows: 3 },
      exportUser: exportUser,
      findExportFields: findExportFields,
      saveExportFields: saveExportFields,
      userSearchList: [
        {
          type: 'text',
          format: [0, 'is_any', 3],
          label: '用户账号',
          field: 'account'
        },
        {
          type: 'text',
          format: [0, 'is_any', 30],
          label: '用户姓名',
          field: 'userName'
        },
        {
          type: 'dic',
          format: [0, 'isDic', 30],
          label: '状态',
          field: 'status',
          dicType: 'yxzt'
        },
        {
          type: 'text',
          format: [0, 'isAny', 30],
          label: '岗位',
          field: 'postStation'
        },
        {
          type: 'text',
          format: [0, 'isAny', 30],
          label: '岗位',
          field: 'postStation'
        }

      ],
      tableHeadList: [
        {
          type: 'action',
          label: '操作',
          content: ['编辑', '停用', '用户登录明细', '订单详细信息'],
          action: [
            (row, index) => this.handleEdit(row, index),
            (row, index) => this.handleDel(row, index),
            (row, index) => this.handleDetail(row, index),
            (row, index) => this.handleInfo(row, index)
          ]
        },
        {
          label: '用户账号',
          prop: 'account',
          fixed: 'left',
          align: 'right',
          query: true
        },
        {
          label: '用户姓名',
          prop: 'userName',
          fixed: 'left',
          query: true
        },
        {
          label: '工号',
          prop: 'userSn'
        },
        {
          label: '岗位',
          prop: 'postStation'
        },
        {
          label: '出生日期',
          prop: 'birthDate'
        },
        {
          label: '性别',
          prop: 'sex',
          type: 'dic',
          dicType: 'xb'
        },
        {
          label: '手机号码',
          prop: 'mobile',
          align: 'right'
        },
        {
          label: '邮箱地址',
          prop: 'email'
        },
        {
          label: '用户类型',
          prop: 'userType'
        },
        {
          label: '用户级别',
          prop: 'userLevel'
        },
        {
          label: '状态',
          prop: 'status',
          render: (scope) => {
            return (
              <ht-switch
                value={scope.row.status.c}
                key={scope.column.columnKey}
                // disabled='true'
                onChange={(newValue) => this.testRefer(newValue, scope)}
              >
              </ht-switch>
            );
          }
        }
      ],
      searchUserData: {},
      roleHeadList: [
        {
          label: '用户账号',
          prop: 'userAccount'
        },
        {
          label: '用户名称',
          prop: 'userName'
        },
        {
          label: '登录时间',
          prop: 'loginTime'
        }
      ]
    };
  },
  computed: {
  },
  mounted() {
    this.handleSearch();
  },
  methods: {
    handleSave() {
      this.dialogVisible = true;
      this.rowData = {};
    },
    handleEdit(row, index) {
      this.dialogVisible = true;
      this.rowData = row;
    },
    handleDel(row, index) {
      alert(index);
      console.log(row);
    },
    async handleDetail(row, index) {
      const detailData = await this.$crud.fetchTable(findUserLoginInfo, { userId: row.id });
      return (
        <ht-table ref={`userRoleList-${index}`} ref-table={`userRoleList-${index}`} table-head={this.roleHeadList} table-data={detailData} table-type='detail' table-fetch={findUserLoginInfo} />
      );
    },
    handleInfo(row, index) {
      this.dialogVisible = true;
      this.rowData = row;
    },
    testRefer(newValue, scope) {
      if (newValue === true)
        scope.row.status.c = '100201';
      else
        scope.row.status.c = '100202';

      this.$notify.confirm('是否更改状态?').then(() => {
        alert(scope.row.userName);
      }).catch(() => {
        if (newValue === true)
          scope.row.status.c = '100202';
        else
          scope.row.status.c = '100201';
      });
    },
    async handleSearch(event) {
      try {
        // 拼接查询条件
        this.searchUserData = await this.$crud.search(this.$refs['userSearchFm'], this.$refs['userTableList'], findUsers);
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    },
    /**
     * @todo: 行双击事件
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-04-27 13:56:56
     * @param {*} row
     * @param {*} column
     * @param {*} event
     */
    handleRowDblClick(row, column, event) {
      alert('dblclick');
      console.log(row);
    },
    /**
     * @todo: 字典选择后回调方法
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-05-04 13:16:23
     * @param {*} row
     */
    handleDicCallBack(row) {
      console.log(row);
    },
    handleCb(res, param) {
      this.importDialogVisible = true;
    },
    /**
     * @todo: 下载excel导入模版
     * @author: andy.ten@tom.com & xukaixing@hotmail.com
     * @Date: 2022-06-05 21:33:31
     */
    async downloadImportTemplate() {
      await downloadTemplate('importUsers.xls');
    }
  }
};
</script>
